<template>
	<view style="background-color:;">
		<!-- 个人背景 -->
		<view class="image-container" @click="editBack">
			<up-image :show-loading="true" :src="backgroundImg" width="100%" height="240px">
			</up-image>
		</view>
		<view style="position: fixed; top: 0; right: 20px; margin-top: 54px; 
		background-color: rgba(150, 158, 173, 0.5);border-radius: 50%;" @click="loginOut">
			<u-icon name="list" color="#FFFFFF" size="24"></u-icon>
		</view>
		<u-popup :show="backShow" @close="backClose" :safeAreaInsetBottom="false">
			<u-loading-icon text="上传中" mode="semicircle" style="position: absolute;margin-top:-500rpx;margin-left: 40%;"
				color="#FFFFFF" textSize="18" :show="download"></u-loading-icon>
			<view
				style="background-color: black; height: 80px;display: flex;justify-content: space-around; align-items: flex-end;">
				<u-button text="更换背景" style="width: 45%;margin-bottom: 20px;" color="#303030"
					@click="startBack"></u-button>
				<u-button text="下载" icon="download" iconColor="#FFFFFF" style="width: 45%;margin-bottom: 20px;"
					color="#303030" @click="downBack"></u-button>
			</view>
		</u-popup>
		<view>
			<view style="position: absolute;margin-top: -100px;margin-left: 20px;">
				<up-avatar src="" size="90" style="box-shadow: 0 0 0 3px white;" v-if="avatarStatus"></up-avatar>
				<!-- 登录后的头像 -->
				<up-avatar @click="clickAvatar" :src="avatar" size="90" style="box-shadow: 0 0 0 3px white;"
					v-else></up-avatar>
				<!-- <view>123</view> -->
			</view>
			<view v-if="loginStatus">
				<view style="position: absolute;margin-top: -80px;margin-left: 130px;">
					<text style="font-size: 20px;color: #ffffff;">{{nickname}}</text>
				</view>
				<view style="position: absolute;margin-top: -55px;margin-left: 130px;">
					<text style="font-size: 10px;color: #ffffff;">like号：{{like_number}}</text>
				</view>
			</view>
			<view style="position: absolute;margin-top: -80px;margin-left: 130px;" @click="login" v-else>
				<text style="font-size: 16px;color: #ffffff;">请先登录~</text>
			</view>
		</view>
		<view style="background-color: black;height: 15px;"></view>
		<view>
			<u-button text="月落" @click="getBattery"></u-button>
			<view style="">
				<text>对方电量:{{level}}</text>
			</view>
		</view>
		<u-tabbar :value="value2" :placeholder="true" @change="name => value2 = name" :fixed="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="任务" icon="photo" @click="click1" badge=""></u-tabbar-item>
			<u-tabbar-item text="兑换" icon="play-right" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from "../../request/API/getUserInfo.js"
	import {
		updateBack
	} from "../../request/API/updateBack.js"
	export default {
		data() {
			return {
				value2: 3,
				nickname: "",
				level: '100%',
				loginStatus: false,
				otherId: false,
				avatar: "",
				avatarStatus: true,
				like_number: "",
				sex: "",
				download: false,
				backgroundImg: "http://qiniu.gaowa.love/65d8009c4d14f1708654748.jpg",
				screenWidth: "",
				backShow: false
			}
		},
		onShow() {
			const token = uni.getStorageSync('token');
			let systemInfo = uni.getSystemInfoSync();
			let screenWidth = systemInfo.windowWidth;
			this.screenWidth = systemInfo.windowWidth;
			console.log('屏幕宽度：', screenWidth);
			getUserInfo()
				.then(data => {
					this.loginStatus = true
					this.avatarStatus = false
					this.nickname = data.data.nickname
					token['userInfo']['nickname'] = this.nickname
					this.avatar = data.data.avatar
					this.sex = data.data.sex
					this.backgroundImg = data.data.backimg
					// console.log(data.data.nickname)
				})
				.catch(error => {

				});
		},
		onLoad() {
			const token = uni.getStorageSync('token');
			if (token) {
				// console.log("有值")
				this.loginStatus = true
				this.avatarStatus = false
				// this.nickname = token['userInfo']['nickname']
				this.avatar = token['userInfo']['avatar']
				this.like_number = token['userInfo']['like_number']
				// this.backgroundImg = token['userInfo']['backimg']
				// console.log(this.backgroundImg)
			}
			// console.log(token)
		},
		methods: {
			login() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			//获取电量
			getBattery() {
				uni.getBatteryInfo({
					success: (res) => {
						// console.log(res.isCharging)
						this.level = res.level + "%"
						uni.showToast({
							title: res.level,
							icon: 'none',
						});
					}
				});
			},
			loginOut() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/home/home' // 重定向到首页，刷新页面
				});
			},
			clickAvatar() {
				uni.navigateTo({
					url: "/pages/home/editMsg?avatar=" + this.avatar + "&nickname=" + this.nickname + "&sex=" +
						this.sex
				})
			},
			editBack() { //修改背景图片
				// console.log(123)
				const token = uni.getStorageSync('token');
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return
				}
				this.backShow = true
			},
			backClose() {
				this.backShow = false
				// console.log('我关闭了')
			},
			startBack() {
				const token = uni.getStorageSync('token');
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.download = true
						uni.uploadFile({
							url: 'http://uni.gaowa.love/api/work/upload', // 替换为您的上传接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							header: {
								Authorization: token['token'] // 在请求头中添加 token
							},
							success: (uploadFileRes) => {
								let dataObj = JSON.parse(uploadFileRes.data);
								// 提取 JSON 对象中的 URL 地址部分
								this.backgroundImg = dataObj.data
								console.log(this.backgroundImg);
								const backimg = this.backgroundImg
								this.backShow = false
								this.download = false
								updateBack({
										backimg
									})
									.then(data => {
										uni.showToast({
											title: data.msg,
											icon: 'none',
										});
									})
									.catch(Error => {

									})
								// 在这里可以保存用户信息和上传后的图片信息
								// 例如，可以将上传后的图片链接保存到数据库中
							}
						});
					}
				});
			},
			downBack() {
				uni.saveImageToPhotosAlbum({
					filePath: "/static/logo.png",
					success: function() {
						console.log('save success');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			click1(e) {
				console.log('click1', e);
				if (e == 0) {
					uni.redirectTo({
						url: "/pages/index/index"
					})
				} else if (e == 1) {
					uni.redirectTo({
						url: "/pages/index/housework"
					})
				} else if (e == 2) {
					uni.redirectTo({
						url: "/pages/cash/cash"
					})
				}
			}
		}
	}
</script>

<style>
	.image-container {
		position: relative;
	}

	.image-container::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 70px;
		/* 调整黑色渐变的高度 */
		background: linear-gradient(to bottom, rgba(185, 185, 185, 0.0), rgba(0, 0, 0, 1));
		/* 从透明到黑色的渐变 */
	}
</style>